<!DOCTYPE html>
<html>
  <head>
    <style>
      .box {
        border: 1px dashed #eee;
        margin: 20px auto;
        max-width: 700px;
        padding: 20px;
      }
    </style>
    <body>
      <div class="box">
        <input type="date" />
        <input type="datetime-local" />
        <input type="time" />
        <input type="week" />
        <input type="month" />
      </div>
      <div class="box">
        <input />
        <input type="email" />
        <input type="number" />
        <input type="password" />
        <input type="search" />
        <input type="tel" />
        <input type="url" />
      </div>
      <div class="box">
        <input type="button" value="普通按钮" />
        <input type="reset" />
        <input type="submit" />
      </div>
      <div class="box">
        <input type="file" />
        <input type="image" alt="图片" />
      </div>
      <div class="box">
        <input type="radio" />
        <input type="checkbox" />
        <input type="color" />
        <input type="range" />
      </div>
      <div class="box">
        <input type="datetime" /> datetime 已废弃，被datetime-local替换 <br />
        <input type="hidden" />
      </div>
      <div class="box">
        <textarea id="area" maxlength="10" oninput="fn()"></textarea>
        <select name="" id=""></select>
        <div id="value"></div>
      </div>

      <script>
        const area = document.querySelector('#area');
        const value = document.querySelector('#value');
        window.fn = () => {
          console.log('==');
          value.innerHTML = 'len:' + area.value.length;
          // requestIdleCallback(fn);
        };
        // fn();
      </script>

      <script type="module">
        import arr from './data.js';

        let total = 0;
        arr.forEach((e) => {
          total += e.in || 0;
          total -= e.out || 0;
        });

        let now = 79551.97;
        console.log((now - total).toFixed(2));
      </script>
    </body>
  </head>
</html>
